<template>
  <div class="example-container">
    <h2>图片标点示例</h2>
    <ImageMarker
      width="100%"
      height="700px"
      :background-image="backgroundImage"
      v-model="markers"
      @marker-click="onMarkerClick"
      @marker-added="onMarkerAdded"
      @markers-cleared="onMarkersCleared"
    />
  </div>
</template>

<script>
import ImageMarker from '@/components/ImageMarker.vue'

export default {
  name: 'ImageMarkerExample',
  components: {
    ImageMarker
  },
  data() {
    return {
      backgroundImage: 'https://example.com/your-background-image.jpg',
      markers: [
        {
          x: 30,
          y: 40,
          key: 'marker1',
          image: 'https://example.com/tooltip-image1.jpg'
        },
        {
          x: 60,
          y: 70,
          key: 'marker2',
          image: 'https://example.com/tooltip-image2.jpg'
        }
      ]
    }
  },
  methods: {
    onMarkerClick(key) {
      console.log('标点被点击：', key);
    },
    onMarkerAdded({ x, y }) {
      console.log('新标点已添加：', { x, y });
    },
    onMarkersCleared() {
      console.log('所有标点已清除');
    }
  }
}
</script>

<style scoped>
.example-container {
  padding: var(--spacing-lg, 20px);
}
</style> 